<template>
	<view class="info-wrap">
		<view class="fboxRow Yend ">
			<view class="fboxCol flex1">
				<view class="name fboxRow Ycenter">{{detail.realName}}
					<text v-if="detail.isMemberAuth" class="bwfont bw-a-zu5297"></text>
				</view>
				<view class="job lh38 font26">{{detail.firstCompanyName || detail.industry || '' }}</view>
				<view class="companyName lh38 font26" v-if="detail.firstPositionName">{{detail.firstPositionName || ''}}</view>
			</view>
			<view class="code fboxCol Ycenter Xcenter" @tap="goPage('qrcode')">	
				<!-- #ifdef MP-WEIXIN -->
				<image class="icon-code" :src="WeChatCodeUrl" mode=""></image>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<image class="icon-code" src="https://ebc-prod.cdn.benwunet.com/uni-static/img3.5.0/index/icon-code2.png" mode=""></image>
				<!-- #endif -->
				<view class="tit mt8 lh38 color-ACB4C7 font26">名片码</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {unlimitedQRCode} from '@/api/card.js'
	export default {
		props:{
			detail:{
				type: Object,
				defaul:()=>{
					return {}
				}
			}
		},
		watch:{
			'detail.cardId':{
				handler(){
					this.getCode()
				},
				deep:  true,
				immediate: true
			}
		},
		data() {
			return {
				WeChatCodeUrl: ''
			}
		},
		// mounted() {
		// 	this.getCode()
		// },
		methods: {
			getCode(){
				// /pages/card/cardDetail?id=
				const pattern = this.pattern ? '*pattern/'+this.pattern : ''
				// #ifdef MP-WEIXIN
					unlimitedQRCode({
						// param: 'pattern='+this.pattern,
						param: 'p/0*id/'+this.detail.cardId+ pattern,
						// param: this.detail.cardId,
						memberId: this.detail.cardId
					}).then(res=>{
						this.WeChatCodeUrl = res.data
					})
				// #endif
			},
			goPage(e) {
				this.$pageTo('/card/qrcode?memberId='+this.detail.cardId)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.info-wrap {
		padding: 40rpx 40rpx 0;
		color: var(--contentFontDarkColor);
	}
	.info-wrap .name{line-height: 64rpx;font-size: 44rpx; font-weight: 500;}
	.info-wrap .name .bwfont{margin-left: 10rpx;background: linear-gradient(360deg, #C49875 6%, #EDB384 100%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
	.info-wrap .job{margin-top: 4rpx;}
	.info-wrap .companyName{margin-top: 12rpx;}

	.info-wrap .icon-code { width: 96rpx; height: 96rpx }
	// #ifdef MP
	.info-wrap .icon-code { width: 80rpx; height: 80rpx; padding: 8rpx; border-radius: 50%;border: 1rpx solid var(--buttonOutlineOneColor);background-color: #fff;}
	// #endif
	
	.tag-auth{ margin-left: 12rpx; padding: 0 12rpx; height: 36rpx;background: var(--backgroundDivisionColor);border-radius: 4rpx}
</style>
